Добавить jwt авторизацию в Api на фронте

disel

Чтобы добавить JWT авторизацию в ваш API с использованием RTK Query и fetchBaseQuery, нужно передавать токен в заголовках запросов. Это можно сделать, настроив fetchBaseQuery для добавления токена в каждый запрос. Вот как это можно реализовать:

Шаги для добавления JWT авторизации

  1. Хранение токена: Убедитесь, что токен хранится в безопасном месте, например, в localStorage, sessionStorage или Redux-хранилище.
  2. Настройка fetchBaseQuery: Используйте параметр prepareHeaders в fetchBaseQuery, чтобы автоматически добавлять токен в заголовки запросов.
  3. Обновление вашего кода: Вот обновленный код с добавлением JWT авторизации:

Обновленный код

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
// Define a service using a base URL and expected endpoints
export const weatherStationApi = createApi({
  reducerPath: "weatherStationApi",
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL,
    prepareHeaders: (headers, { getState }) => {
      // Получаем токен из localStorage или Redux-хранилища
      const token = localStorage.getItem("jwtToken"); // Или из Redux: getState().auth.token
 
      // Если токен существует, добавляем его в заголовки
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
 
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getWeatherStationAll: builder.query<any, void>({
      query: (initialPost) => ({
        url: `/weather-station/all`,
        method: "POST",
        body: initialPost,
      }),
    }),
    updateWeatherStation: builder.mutation({
      query: (data) => ({
        url: `/weather-station/update`,
        method: "POST",
        body: data,
      }),
    }),
    deleteWeatherStation: builder.mutation({
      query: (data) => ({
        url: `/weather-station/delete`,
        method: "POST",
        body: data,
      }),
    }),
  }),
});
 
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const {
  useGetWeatherStationAllQuery,
  useUpdateWeatherStationMutation,
  useDeleteWeatherStationMutation,
} = weatherStationApi;

Объяснение изменений

  1. prepareHeaders:
    • Этот метод вызывается перед каждым запросом.
    • Мы добавляем токен в заголовок Authorization в формате Bearer <токен>.
  2. Хранение токена:
    • В примере токен извлекается из localStorage. Вы можете заменить это на Redux-хранилище, если используете его для управления состоянием аутентификации.
  3. Безопасность:
    • Убедитесь, что токен обновляется при необходимости (например, при истечении срока действия) и удаляется при выходе пользователя из системы.

Дополнительно: Обработка ошибок авторизации

Если токен недействителен или истек, сервер может вернуть ошибку 401 (Unauthorized). Вы можете обработать это, добавив baseQuery с обработчиком ошибок:

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
baseQuery: async (args, api, extraOptions) => {
  const result = await fetchBaseQuery({
    baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL,
    prepareHeaders: (headers, { getState }) => {
      const token = localStorage.getItem("jwtToken");
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
      return headers;
    },
  })(args, api, extraOptions);
 
  if (result.error &amp;&amp; result.error.status === 401) {
    // Логика выхода пользователя или обновления токена
    console.error("Unauthorized! Redirecting to login...");
  }
 
  return result;
},

Теперь ваш API поддерживает JWT авторизацию! 🎉

Похожие записи/страницы: